import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import CarouselExample from '../../ch/demo/CarouselExample.vue'

<Meta
  title="Components/Carousel"
  component={CarouselExample}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CarouselExample},
  template:
    `
    <div class="section section--default">
        <div class="container">
          <CarouselExample
            :breakpoints="breakpoints"
            :paginationType="paginationType"
            :id="id"
            :slides="slides"
          />
          <div>
            Some random content below carousel. Some random content below carousel. Some random content below carousel. Some random content below carousel. Some random content below carousel. Some random content below carousel. Some random content below carousel. Some random content below carousel. Some random content below carousel.
          </div>
        </div>
      </div>
    `,
})

export const TemplateBackgrounds = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CarouselExample},
  template:
    `
    <div>
      <div class="section bg--secondary-50">
        <div class="container">
          <CarouselExample
            :breakpoints="breakpoints"
            :paginationType="paginationType"
            :id="2"
            :slides="slides"
          />
        </div>
      </div>
      <div class="section bg--secondary-100">
        <div class="container">
          <CarouselExample
            :breakpoints="breakpoints"
            :paginationType="paginationType"
            :id="3"
            :slides="slides"
          />
        </div>
      </div>
      <div class="section bg--secondary-500">
        <div class="container">
          <CarouselExample
            :breakpoints="breakpoints"
            :paginationType="paginationType"
            :id="4"
            :slides="slides"
          />
        </div>
      </div>
      <div class="section bg--secondary-600">
        <div class="container">
          <CarouselExample
            :breakpoints="breakpoints"
            :paginationType="paginationType"
            :id="5"
            :slides="slides"
          />
        </div>
      </div>
    </div>
    `,
})

# Carousel
They are used to display a collection of complex items (teasers or cards for example). This component is similar to the `Slideshow` component, but with a difference on large screens: several items are visible at same time.
Carousels are built with https://swiperjs.com/.

## Bullets as pagination
If the number of images is relatively low (below 6), use the `bullets` variant.

<Canvas>
  <Story
    name="With bullets"
    args={{
      id: 1,
      paginationType: 'bullets',
      slides: [
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=29',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=29',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=1045',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=1045',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=29',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=29',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Large number of Cards
If the number of cards is larger than 6, the bullet points are hidden through CSS on small viewports.

<Canvas>
  <Story
    name="Large number of cards"
    args={{
      id: 111,
      paginationType: 'bullets',
      slides: [
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=29',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=29',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=1045',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=1045',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=29',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=29',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=1045',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=1045',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=29',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=29',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>



# Backgrounds
The recommended background colors for carousels are the following: `bg--default`, `bg--secondary-50`, `bg--secondary-100`, `bg--secondary-500`, `bg--secondary-600`.

<Canvas>
  <Story
    name="Backgrounds"
    args={{
      id: 10,
      paginationType: 'bullets',
      slides: [
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=29',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=29',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=28',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=28',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        },
        {
          image: {
            src: 'https://picsum.photos/1024/768/?image=1045',
            width: '1024',
            height: '768',
            alt: 'image name',
          },
          source: {
            srcset: 'https://picsum.photos/2048/1152/?image=1045',
            width: '2048',
            height: '1152',
            media: '(min-width: 1024px)',
          },
          title: 'Card title',
          description: 'If possible, less than 150 chars here, sed Lorem ipsum dolor sit amet, consetetur sadipscing elir, sed Lorem ipsum dolor sit amet...',
          footerInfo: 'Dienstleistungen & Produkte',
        }
      ]
    }}
  >
    {TemplateBackgrounds.bind({})}
  </Story>
</Canvas>


